<template>
  <div style="width: 100%;height: 100vh;overflow: hidden">
    <div style="width: 17vw;height: 100vh;float: left;overflow: auto;background-color: white;">
      <Menu
          width="auto"
          class="doc-menu"
          theme="light"
          :active-name="active_name"
          :open-names="open_names"
          @on-select="getChapterDetail"
      >
        <Submenu v-for="item in menu" :key="item.id" :name="item.id">
          <template #title>
            <Icon type="ios-paper"/>
            {{ item.title }}
          </template>
          <SubmenuDeep v-if="item.childlist.length>0" :menu="item.childlist"/>
        </Submenu>
      </Menu>
    </div>
    <div id="center-content" class="center-content">
      <div class="content-panel">
        <div style="height: 20px;">
          <ButtonGroup style="float: right;margin-right: 10px">
            <Button icon="ios-print-outline" type="dashed" @click="handelPrint"></Button>
            <Button icon="ios-share-outline" type="dashed" @click="handleShare">分享</Button>
          </ButtonGroup>
        </div>
        <Divider/>
        <div id="chapter_content">
          <div class="content-header">
            <span>{{ chapter.title }}</span>
          </div>
          <div class="content" v-html="chapter.content">
          </div>
        </div>

        <Divider/>
        <div class="article-end-panel">

        </div>
      </div>
      <Footer class="layout-footer-center"/>
    </div>
    <div style="width: 19vw;height: 100vh;float: right;overflow: auto;">
      <!--      <Anchor :scroll-offset="120" :affix="true" container="#center-content" :offset-top="100"-->
      <!--              style="margin: 120px 0 100px 10px" show-ink>-->
      <!--        <AnchorLink href="#aa" title="hh hh"/>-->
      <!--        <AnchorLink href="#API" title="API">-->
      <!--          <AnchorLink href="#Anchor_props" title="Anchor props">-->
      <!--            <AnchorLink href="#Anchor_events" title="Anchor events"/>-->
      <!--          </AnchorLink>-->
      <!--          <AnchorLink href="#Anchor_events" title="Anchor events"/>-->
      <!--          <AnchorLink href="#fffff" title="fffff"/>-->
      <!--        </AnchorLink>-->

      <!--      </Anchor>-->
    </div>
  </div>
</template>
<script>
import printJS from 'print-js'
import Footer from '@/components/Footer.vue'
import SubmenuDeep from '@/components/SubmenuDeep.vue'
import { getMenu, getDetail } from '../../api/chapters'

export default {
  name: 'Document',
  props: ['document_id'],
  components: {
    Footer,
    SubmenuDeep
  },
  data() {
    return {
      active_name: null,
      default_id: null,
      open_names: [],

      menu: {},
      directory: {},
      chapter: {}
    }
  },
  created() {
    this.getDocumentMenu()
  },
  methods: {
    // 获取左侧菜单
    getDocumentMenu() {
      if (!this.document_id) {
        this.$Message.error({
          content: '参数缺失',
          onClose: () => {
            this.$router.push({ name: 'Index' })
          }
        })
        return
      }
      getMenu({ document_id: this.document_id }).then((res) => {
        if (res.code === 1401) {
          this.$router.push({
            name: 'DocAccessIndex',
            params: { document_id: this.document_id, id: this.$route.query?.id },
          })
          return
        }

        if (res.data?.list.length < 1) {
          this.$Message.error('没有目录')
          this.$router.push({ name: 'Index' })
          return
        }

        this.menu = res.data.list
        this.default_id = res.data.default_id

        this.getDefaultChapter()
      }).catch(() => {
        this.$Message.error('菜单获取失败')
        this.$router.back()
      })
    },

    // 获取默认的章节
    getDefaultChapter() {
      let id = this.$route.query?.id
      if (!id) {
        id = localStorage.getItem(`def-chapter-doc:${this.document_id}`)
      }
      if (!id) {
        id = this.default_id
      }
      if (!id) {
        this.$Message.error('默认章节获取失败')
        return
      }

      this.getChapterDetail(id)
    },

    // 获取章节详情
    getChapterDetail(id) {
      this.$router.push({
        query: { id, document_id: this.document_id },
        params: { id, document_id: this.document_id }
      })

      this.$Loading.start()
      getDetail({ id, document_id: this.document_id }).then((res) => {
        this.$Loading.update(90)
        this.chapter = res.data
        this.$Loading.finish()
        this.active_name = parseInt(id, 10)
        localStorage.setItem(`def-chapter-doc:${this.document_id}`, id)
      }).catch(() => {
        this.$Message.error('详情获取失败')
        this.$Loading.error()
      })
    },

    handleShare() {
      this.$Copy({
        text: window.location.href,
        success: () => {
        },
        error: () => {
        }
      })
    },

    handelPrint() {
      try {
        printJS({
          printable: 'chapter_content',
          type: 'html',
          style: '@page {margin: 0 10mm};', // 不打印页眉和页脚
          honorColor: true, // 是否打印彩色文本
          onError: (error) => {
            console.log(error)
          },
          targetStyles: ['*'] // 允许打印所有样式属性
        })
      } catch (error) {
        this.$Message.error('打印失败')
        console.log(error)
      }
    }

  }
}

</script>
<style lang="less" scoped>
.doc-menu {
  height: 100vh;
  padding-top: 60px;
}

ul:after {
  content: none !important;
}

.layout-footer-center {
  text-align: center;
  margin-bottom: 120px;
}

//.layout-sider {
//  box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
//  margin-bottom: 40px;
//  overflow: auto;
//  background-color: white;
//}

.center-content {
  width: 60vw;
  height: 100vh;
  float: left;
  overflow: auto;
  margin: 0 1.5vw 0 2.5vw;
}

.content-panel {
  width: 99%;
  overflow: auto;
  background-color: white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 20px 10px;

  margin: 80px 3px 3px;
}

.content-header {
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  min-height: 500px;
  padding: 20px 30px
}

.article-end-panel {

}
</style>
